<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>商品（Spu）介绍</h3>
      <el-form ref="dataForm" :rules="rules" :model="product" label-width="150px">
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="product.title" />
        </el-form-item>
        <el-form-item label="原始价格" prop="originalPriceRaw">
          <el-input v-model="product.originalPriceRaw" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="当前价格" prop="priceRaw">
          <el-input v-model="product.priceRaw" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="VIP价格" prop="vipPriceRaw">
          <el-input v-model="product.vipPriceRaw" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="排序" prop="orderC">
          <el-input v-model="product.orderC" />
        </el-form-item>
        <el-form-item label="标签">
          <el-tag
            v-for="tag in dynamicTags"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
        </el-form-item>
        <el-form-item label="剩余库存" prop="stock">
          <el-input v-model="product.stock" placeholder="0" />
        </el-form-item>

        <el-form-item label="运费模板" prop="freightTemplate">
          <el-select v-model="product.freightTemplateId" placeholder="选择商品运费模板">
            <el-option v-for="(item, index) in freightList" :key="index" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="是否在售" prop="status">
          <el-radio-group v-model="product.status">
            <el-radio :label="1">在售</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
            :action="uploadPath"
            :headers="headers"
            :limit="5"
            :file-list="imgsFileList"
            :on-exceed="uploadOverrun"
            :on-success="handleimgsUrl"
            :on-remove="handleRemove"
            multiple
            accept=".jpg, .jpeg, .png, .gif"
            list-type="picture-card"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="商品单位" prop="unit">
          <el-input v-model="product.unit" placeholder="件 / 个 / 盒" />
        </el-form-item>

        <el-form-item label="所属类目" prop="category">
          <el-cascader
            v-model="categoryIds"
            :options="categoryList"
            :props="{label:'title', value:'id', children:'childrenList'}"
            expand-trigger="hover"
            @change="handleCategoryChange"
          />
        </el-form-item>

        <el-form-item label="商品简介" prop="description">
          <el-input v-model="product.description" />
        </el-form-item>

        <el-form-item label="商品详细介绍" prop="detail">
          <editor v-model="product.detail" :init="editorInit" />
        </el-form-item>

      </el-form>
    </el-card>
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-if="!product.id" type="primary" @click="handleCreate">保存商品</el-button>
      <el-button v-if="product.id" type="primary" @click="handleEdit">更新商品</el-button>
    </div>
  </div>
</template>

<script>
import { detailProduct, editProduct, createProduct } from "@/api/product";
import { categoryTree } from "@/api/category";
import { listFreight } from "@/api/freight";
import { uploadPath, createStorage } from "@/api/storage";
import Editor from "@tinymce/tinymce-vue";
import { MessageBox } from "element-ui";
import { getToken } from "@/utils/auth";

export default {
  name: "ProductAdd",
  components: { Editor },
  data() {
    return {
      zzjgId: -999,
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      uploadPath,
      freightList: [],
      imgsFileList: [],
      categoryList: [],
      categoryIds: [],
      skuTableData: [],
      product: {
        imgList: [],
        type: 0
      },
      attributeVisiable: false,
      attributeForm: { attribute: "", value: "" },
      attributes: [],
      skuBatchPriceVisiable: false,
      skuBatchPriceForm: {},
      specVisiable: false,
      specForm: { title: undefined },
      skuList: [],
      specList: [],
      skuStatusDialogMap: { "create": "创建sku", "update": "更新sku" },
      specStatusDialogMap: { "create": "创建规格", "update": "更新规格" },
      skuStatus: "",
      specStatus: "",
      rules: {
        status: [
          { required: true, message: "请选择商品状态", trigger: "blur" }
        ],
        title: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        priceRaw: [
          { required: true, message: "商品现价不能为空", trigger: "blur" }
        ],
        originalPriceRaw: [
          { required: true, message: "商品原价不能为空", trigger: "blur" }
        ],
        vipPriceRaw: [
          { required: true, message: "商品ViP价格不能为空", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "物件单位不能为空", trigger: "blur" }
        ],
        detail: [{ required: true, message: "请填写商品详情", trigger: "blur" }]
      },
      specRules: {
        title: [
          { required: true, message: "规格维度标题不能为空", trigger: "blur" }
        ]
      },
      attrRules: {
        attribute: [
          { required: true, message: "属性名称不能为空", trigger: "blur" }
        ],
        value: [
          { required: true, message: "属性值不能为空", trigger: "blur" }
        ]
      },
      editorInit: {
        language: "zh_CN",
        convert_urls: false,
        plugins: ["advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount"],
        toolbar: ["searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample", "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen"],
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          createStorage(formData).then(res => {
            success(res.data.url);
          }).catch((e) => {
            console.log(e);
            failure("上传失败，请重新上传");
          });
        }
      }

    };
  },
  computed: {
    headers() {
      return {
        ADMINTOKEN: getToken(),
        Authorization: "Bearer " + getToken()
      };
    }
  },
  created() {
    this.init();
  },
  methods: {
    init: function() {
      const productId = this.$route.query.id;
      this.zzjgId = this.$route.query.zzjgId;
      if (productId) {
        detailProduct(productId).then(response => {
          // 将分转换为元
          response.data.data.priceRaw = response.data.data.price / 100;
          response.data.data.originalPriceRaw = response.data.data.originalPrice / 100;
          response.data.data.vipPriceRaw = response.data.data.vipPrice / 100;
          // 深拷贝
          this.product = JSON.parse(JSON.stringify(response.data.data));
          if (this.product.tags) {
            this.dynamicTags = this.product.tags.split(",");
          }
          this.attributes = response.data.data.attributeList ? response.data.data.attributeList : [];
          this.categoryIds = response.data.data.categoryIds.map(item => String(item));
          this.skuList = response.data.data.skuList;
          const allData = response.data.data;
          if (allData.specificationList) {
            for (let i = 0; i < response.data.data.specificationList.length; i++) {
              response.data.data.specificationList[i].values = [];
              response.data.data.specificationList[i].inputSkuTagValue = false;
              response.data.data.specificationList[i].inputSkuTagValue = "";
            }
          }

          // spu规格列表

          this.specList = response.data.data.specificationList;
          this.imgsFileList = [];
          for (var i = 0; i < this.product.imgList.length; i++) {
            this.imgsFileList.push({
              url: this.product.imgList[i]
            });
          }
          const stock = 0;
          if (!this.product.stock) {
            this.product.stock = 0;
          }
          // this.product.stock = stock;
          if (this.product.skuList) {
            this.product.skuList.forEach(item => {
              this.product.stock += item.stock;
              item.priceRaw = item.price / 100;
              item.originalPriceRaw = item.originalPrice / 100;
              item.vipPriceRaw = item.vipPrice / 100;
              const tempArray = item.specification.split(",");
              for (let i = 0; i < tempArray.length; i++) {
                const skuSpecTemp = tempArray[i];
                const singleArray = skuSpecTemp.split("_");
                item["id_" + singleArray[0]] = singleArray[1];
                for (let j = 0; j < this.specList.length; j++) {
                  if (this.specList[j].title === singleArray[0]) {
                    // 若是同一个Key。则将value追加到其values里面
                    if (this.specList[j].values) {
                      if (this.specList[j].values.indexOf(singleArray[1]) < 0) {
                        this.specList[j].values.push(singleArray[1]);
                      }
                    } else {
                      this.specList[j].inputSkuTagVisible = false;
                      this.specList[j].inputSkuTagValue = "";
                      this.specList[j].values = [singleArray[1]];
                    }
                  }
                }
              }
            });
          }
          this.skuTableData = JSON.parse(JSON.stringify(this.product.skuList));
        });
      }

      categoryTree(this.zzjgId).then(response => {
        this.categoryList = response.data.data;
      });

      listFreight().then(response => {
        this.freightList = response.data.data;
      });
    },
    handleCategoryChange(value) {
      this.product.categoryId = value[value.length - 1];
      this.category = value[value.length - 1];
    },
    handleCancel: function() {
      this.$router.push({ path: "/product" });
    },
    handleCreate: function() {
      this.handleUpsert("create");
    },
    handleEdit: function() {
      this.handleUpsert("edit");
    },
    /**
     * 执行更新添加操作，传入操作action字符串: 'create', 'edit'
     */
    handleUpsert(action) {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.product.freightTemplateId === undefined || this.product.freightTemplateId === null) {
            this.$notify.error({
              title: "失败",
              message: "请添加运费模板"
            });
          } else if (this.categoryIds.length === 0) {
            this.$notify.error({
              title: "失败",
              message: "请选择类目"
            });
          } else if (this.product.imgList.length === 0) {
            this.$notify.error({
              title: "失败",
              message: "请上传至少一张图片"
            });
          } else {
            this.product.categoryId = this.categoryIds[0];
            this.product.price = parseInt(this.product.priceRaw * 100);
            this.product.originalPrice = parseInt(this.product.originalPriceRaw * 100);
            this.product.vipPrice = parseInt(this.product.vipPriceRaw * 100);
            this.product.specificationList = this.specList;
            this.product.zzjgId = this.zzjgId;
            console.log("prode", finalProduct);
            const tags = this.dynamicTags.join(",");
            const finalProduct = {
              ...this.product,
              attributeList: this.attributes,
              isBaiHuo: 0,
              tags: tags
            };
            let method = createProduct;
            let successWords = "创建成功";
            if (action === "edit") {
              method = editProduct;
              successWords = "编辑成功";
            }

            method(finalProduct)
              .then(response => {
                this.$notify.success({
                  title: "成功",
                  message: successWords
                });
                this.$router.push({ path: "/product", query: { zzjgId: this.currentId }});
              })
              .catch(response => {
                MessageBox.alert("业务错误：" + response.data.errmsg, "警告", {
                  confirmButtonText: "确定",
                  type: "error"
                });
              });
          }
        } else {
          this.$notify.error({
            title: "失败",
            message: "请完善以上表单"
          });
        }
      });
    },
    handleAttributeShow() {
      this.attributeForm = {};
      this.attributeVisiable = true;
    },
    handleAttributeAdd() {
      this.$refs["attributeForm"].validate(valid => {
        if (valid) {
          this.attributes.unshift(this.attributeForm);
          this.attributeVisiable = false;
        }
      });
    },
    handleAttributeDelete(row) {
      const index = this.attributes.indexOf(row);
      this.attributes.splice(index, 1);
    },
    // SKU相关
    handleSkuTagClose(index, tag, item) {
      item.values.splice(item.values.indexOf(tag), 1);
      this.loadSkuTable();
    },
    skuTableSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < this.specList.length) {
        // 若是前N列
        // 后面N - 1个
        let ji = 1;
        for (let z = columnIndex + 1; z < this.specList.length; z++) {
          ji = ji * this.specList[z].values.length;
        }
        if (rowIndex % ji === 0) {
          return {
            rowspan: ji, // 后面的乘积
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    },
    loadSkuTable() {
      // 从specList中获取数据
      const attrList = this.specList;
      const cacheTable = this.skuTableData;
      let newTable = [];

      for (let i = 0; i < attrList.length; i++) {
        const attr = attrList[i];
        const tmpArray = [];

        if (i === 0) {
          for (let j = 0; j < attr.values.length; j++) {
            const tempTemp = [];
            tempTemp.push(attr.values[j]);
            tmpArray.push(tempTemp);
          }
          newTable = tmpArray;
        } else {
          for (let z = 0; z < newTable.length; z++) {
            for (let j = 0; j < attr.values.length; j++) {
              const tempTemp = Object.assign([], newTable[z]);
              tempTemp.push(attr.values[j]);
              tmpArray.push(tempTemp);
            }
          }
          newTable = tmpArray;
        }
      }
      const finalNewTable = [];
      for (let i = 0; i < newTable.length; i++) {
        const obj = {};
        for (let j = 0; j < newTable[i].length; j++) {
          obj["id_" + attrList[j].title] = newTable[i][j];
        }
        for (let j = 0; j < cacheTable.length; j++) {
          let equals = true;
          for (let z = 0; z < this.specList.length; z++) {
            const title = this.specList[z].title;
            if (cacheTable[j]["id_" + title] !== obj["id_" + title]) {
              equals = false;
            }
          }
          if (equals) {
            obj.originalPrice = cacheTable[j].originalPrice;
            obj.price = cacheTable[j].price;
            obj.originalPriceRaw = cacheTable[j].originalPriceRaw;
            obj.vipPrice = cacheTable[j].vipPrice;
            obj.vipPriceRaw = cacheTable[j].vipPriceRaw;
            obj.priceRaw = cacheTable[j].priceRaw;
            obj.stock = cacheTable[j].stock;
            obj.barCode = cacheTable[j].barCode;
            obj.weight = cacheTable[j].weight;
            obj.id = cacheTable[j].id;
          }
        }
        // 从缓存表中加上默认的值
        finalNewTable.push(obj);
      }
      // 变成对象
      this.skuTableData = finalNewTable;
    },
    handleSkuTagInputConfirm(index, item) {
      const inputSkuTagValue = item.inputSkuTagValue;
      if (item.values.indexOf(inputSkuTagValue) > -1) {
        this.$notify.warning({
          title: "失败",
          message: "请不要添加重复属性"
        });
      } else {
        if (inputSkuTagValue) {
          item.values.push(inputSkuTagValue);
        }
      }
      item.inputSkuTagVisible = false;
      item.inputSkuTagValue = "";
      this.loadSkuTable();
    },
    handleSkuTagCreate(item) {
      item.inputSkuTagVisible = true;
      this.$forceUpdate();
    },
    // 规格相关代码START
    createSpecDialogShow() {
      this.specStatus = "create";
      this.specForm = {};
      this.specVisiable = true;
    },
    updateSpecDialogShow(row) {
      this.specStatus = "update";
      this.specForm = Object.assign({}, row);
      this.specVisiable = true;
    },
    randonBarcode(row) {
      row.barCode = new Date().getTime() + "";
      this.$forceUpdate();
    },
    handleBatchPrice() {
      for (let i = 0; i < this.skuTableData.length; i++) {
        if (this.skuBatchPriceForm.price) {
          this.skuTableData[i].priceRaw = this.skuBatchPriceForm.price;
        }
        if (this.skuBatchPriceForm.vipPrice) {
          this.skuTableData[i].vipPriceRaw = this.skuBatchPriceForm.vipPrice;
        }
        if (this.skuBatchPriceForm.originalPrice) {
          this.skuTableData[i].originalPriceRaw = this.skuBatchPriceForm.originalPrice;
        }
      }
      this.skuBatchPriceVisiable = false;
    },
    /** ******************* 图片上传相关 *********************/
    uploadOverrun: function() {
      this.$message({
        type: "error",
        message: "上传文件个数超出限制!最多上传5张图片!"
      });
    },
    handleimgsUrl(response, file, fileList) {
      if (response.errno === 200) {
        this.product.imgList.push(response.url);
        this.product.img = this.product.imgList[0];
      }
    },
    handleRemove: function(file, fileList) {
      for (var i = 0; i < this.product.imgList.length; i++) {
        // 这里存在两种情况
        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.url
        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
        var url;
        if (file.response === undefined) {
          url = file.url;
        } else {
          url = file.response.url;
        }

        if (this.product.imgList[i] === url) {
          this.product.imgList.splice(i, 1);
        }
      }
      if (this.product.imgList.length > 0) {
        this.product.img = this.product.imgList[0];
      }
    },
    beforSkuImgUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }
      return isLt2M;
    },
    handleSkuImgSuccess(e, file, scope) {
      this.$set(this.skuTableData[scope.$index], "img", e.url);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }

  }
};
</script>

<style>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}

.sku-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.sku-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.sku-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.sku {
  width: 60px;
  height: 60px;
  display: block;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
